<template>
    <div class="complaint">
        <el-row>
            <el-col :span="24" class="base-mian-cell" v-if="complainFlag">
                <div class="base-mian-cell-title clearfix">
                    <div class="left fl">
                        <span class="line">|</span>
                        <span class="tips">客户投诉记录</span>
                    </div>
                    <div class="right fr" @click="changeView">
                        <i class="el-icon-circle-close"></i>
                    </div>
                </div>
                <div class="base-mian-cell-main">
                    <el-table
                            :data="complainData"
                            style="width: 100%">
                        <el-table-column
                                prop="complainNo"
                                label="案件编号"
                                min-width="200"
                                show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div class="txt" @click="complainInfo(scope.row)">{{scope.row.complainNo}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="cusCompLainDate"
                                label="客户投诉日期"
                                min-width="160"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="policyNo"
                                label="保单号"
                                min-width="160"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="touSuType"
                                label="投诉类别"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="assignName"
                                label="投诉人姓名"
                                min-width="200"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="policyNo"
                                label="涉案保单"
                                min-width="120"
                                show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="scope.row.isGroup=='N'">{{scope.row.contNo}}</span>
                                <span v-else>{{scope.row.grpContNo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="beiSuType"
                                label="投诉对象"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="agentName"
                                label="投诉对象姓名"
                                min-width="200"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="handleTypeF"
                                label="经办部门"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="handleWithId"
                                label="经办人"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="recorderDeptName"
                                label="受理部门"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="recorder"
                                label="受理人"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="dealWithStatus"
                                label="状态"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="endType"
                                label="结案类型"
                                min-width="120"
                                show-overflow-tooltip>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="pagination">
                    <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <!-- 客户投诉信息 -->
        <el-dialog
                title="投诉详情"
                :visible.sync="opinionDialogVisible2"
                width="60%"
                center>
            <el-row class="mb10">
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">投诉对像</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.beiSuType" readonly></el-input>
                    </el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">公司</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.areaF" readonly></el-input>
                    </el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">投诉来源</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.assignSource" readonly></el-input>
                    </el-col>
                </el-col>
            </el-row>
            <el-row class="mb10">
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">投诉类型</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.touSuType" readonly></el-input>
                    </el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">申诉性质</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.shenSuKind" readonly></el-input>
                    </el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">重大归类</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.shenSuImp" readonly></el-input>
                    </el-col>
                </el-col>
            </el-row>
            <el-row class="mb10">
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">投诉原因</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.baoYuanCause" readonly></el-input>
                    </el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">其它(请详述)</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.touSuOther" readonly></el-input>
                    </el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="8">
                        <label class="complain-lab">经办部门</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input v-model="detail.handleTypeF" readonly></el-input>
                    </el-col>
                </el-col>
            </el-row>
            <el-row class="mb10">
                <el-col :span="24">
                    <el-col :span="3">
                        <label class="complain-lab">投诉摘要</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input
                                type="textarea"
                                :rows="4"
                                v-model="detail.description"
                                placeholder="请输入内容"
                        >
                        </el-input>
                    </el-col>
                </el-col>
            </el-row>
            <div class="com-title clearfix">
                <div class="left fl">
                    <span class="line">|</span>
                    <span class="tips">客户投诉记录</span>
                </div>
            </div>
            <el-table :data="historys">
                <el-table-column type="index" label="序号" min-width="80" show-overflow-tooltip></el-table-column>
                <el-table-column property="dealWithTime" label="记录时间" min-width="200" show-overflow-tooltip></el-table-column>
                <el-table-column property="jingBanDate" label="经办时间" min-width="160" show-overflow-tooltip></el-table-column>
                <el-table-column property="complainType" label="投诉类型" min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column property="baoYuanCause" label="投诉原因" min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column property="dealWithType" label="经办状态" min-width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column property="dealWithContent" label="意见" min-width="300" min-height="200" show-overflow-tooltip></el-table-column>
                <el-table-column property="dealWithName" label="填写人" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column property="dealWithDeptName" label="所属部门" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column property="dealWithStatus" label="操作状态" min-width="120" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button @click="opinionDialogVisible2 = false">返 回</el-button>
        </span>
        </el-dialog>


    </div>
</template>
<script>
  import {
    findCustomerComplaints,
    getDetailAndHistory
  } from "@/api/underwriting/uw";
  import constant from '@/utils/constant';
  import moment from 'moment';
export default {
    data(){
        return{
            complainData:[],
            opinionDialogVisible2: false,
            historys: [],
          detail:{},
          paginations: {
            total: 0,        // 总数
            pageIndex: 1,  // 当前位于哪页
            pageSize: 10,   // 1页显示多少条
            pageSizes: [5, 10, 15, 20],  //每页显示多少条
            layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
          },
            complainInfoTimeOut:null,
            initDataTimeOut:null,
        }
    },
    props:{
        complainFlag:{
            type: Boolean,
            default: false
        },
      clntnum:{
            type: String,
            default: ""
        }
    },
    destroyed() {
        clearTimeout(this.complainInfoTimeOut)
        clearTimeout(this.initDataTimeOut)
    },
    methods:{
        // 改变试图
        changeView(){
            this.$emit('subComplainFlag',false);
            // this.subComplainFlag = false;
        },
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.initData();
      },
      handleSizeChange() {
        this.paginations.pageSize = pageSize;
        this.initData();
      },

        // 投诉信息
        complainInfo(data) {
          let that = this;
          let params = {
            "policyNo": data.policyNo,
            "complainNo": data.complainNo
          }
		  that.historys =[];
          that.$emit('showLoading',true);
          this.complainInfoTimeOut = setTimeout(function () {

            getDetailAndHistory(params).then(res => {
              that.$emit('showLoading',false);
              if (res.resultCode == constant.SUCCESS && res.data != null) {
                let baoYuanCause = res.data.detail.baoYuanCauseF + "/" + res.data.detail.baoYuanCause;
                that.detail = res.data.detail
                that.detail.baoYuanCause = baoYuanCause;

                if(res.data.historys){
                  res.data.historys.forEach(item=>{
                    if(item.dealWithTime && item.dealWithTime.length>=14){
                      item.dealWithTime = item.dealWithTime.substring(0,4)+"-"
                        +item.dealWithTime.substring(4,6)
                        +"-"+item.dealWithTime.substring(6,8)
                        +" "+item.dealWithTime.substring(8,10)
                        +":"+item.dealWithTime.substring(10,12)
                        +":"+item.dealWithTime.substring(12,14)
                    }

                    that.historys.push(item);
                  })
                }
                // that.historys = res.data.historys;
              }
              that.opinionDialogVisible2 = true;
            }).catch(err => {
              that.$emit('showLoading',false);
            })
          },100)
        },

       initData(){
         let that = this;
         let params = {
           "pageSize": that.paginations.pageSize,
           "pageNumber": that.paginations.pageIndex,
           "customerNo": that.clntnum
         }
         that.$emit('showLoading',true);
         this.initDataTimeOut = setTimeout(function () {
           findCustomerComplaints(params).then(res => {
             that.$emit('showLoading',false);
             if (res.resultCode == constant.SUCCESS && res.data != null) {
               that.paginations.total = res.data.total
               that.complainData = res.data.list;
             }
           }).catch(err => {
             that.$emit('showLoading',false);
           })
         },100)

       },


    },
    created() {
      this.initData();
    },
  filters: {
    complainTypePipe:function (value) {
      var temp ="";
      if(value == '0'){
        temp = '抱怨'
      } else if(value == '1'){
        temp = '申诉'
      }
      return temp
    },
    dealWithTypePipe:function (value) {
      var temp ="";
      if(value == '4001'){
        temp = '调查'
      } else if(value == '4002'){
        temp = '结案'
      }else if(value == '4003'){
        temp = '复核'
      }else if(value == '4004'){
        temp = '返回'
      }else if(value == '4005'){
        temp = '签核qq'
      }
      return temp
    },
    dealWithStatusPipe:function (value) {
      var temp ="";
      if(value == '0'){
        temp = '提交审核'
      } else if(value == '1'){
        temp = '审核通过'
      }else if(value == '2'){
        temp = '审核返回'
      }else if(value == '3'){
        temp = '经办处理'
      }else if(value == '4'){
        temp = '经办返回'
      }else if(value == '5'){
        temp = '提交复核'
      }else if(value == '6'){
        temp = '复核通过'
      }else if(value == '7'){
        temp = '复核返回'
      }else if(value == '8'){
        temp = '结案'
      }else if(value == '9'){
        temp = '取消'
      }
      return temp
    },
    baoYuanCausePipe:function (value) {
      var temp ="";
      if(value == '1601'){
        temp = '专业知识'
      } else if(value == '1602'){
        temp = '服务态度'
      }else if(value == '1603'){
        temp = '沟通技巧'
      }else if(value == '1604'){
        temp = '内勤其他'
      }else if(value == '1501'){
        temp = '错误指引-产品'
      }else if(value == '1502'){
        temp = '错误指引--服务'
      }else if(value == '1503'){
        temp = '错误指引--销售'
      }else if(value == '1504'){
        temp = '服务质量'
      }else if(value == '1505'){
        temp = '保单文件非客户本人签名'
      }else if(value == '1506'){
        temp = '非恰当展业'
      }else if(value == '1507'){
        temp = '营销员其他'
      }else if(value == '1508'){
        temp = '挪用保费'
      }else if(value == '1701'){
        temp = '条款'
      }else if(value == '1702'){
        temp = '单证'
      }else if(value == '1703'){
        temp = '费率'
      }else if(value == '1704'){
        temp = '系统'
      }else if(value == '1705'){
        temp = '附加价值'
      }else if(value == '1706'){
        temp = '信函、短信、网站'
      }else if(value == '1707'){
        temp = '时效'
      }else if(value == '1708'){
        temp = '理赔结论'
      }else if(value == '1709'){
        temp = '保全规则及流程'
      }else if(value == '1710'){
        temp = '理赔规则及流程'
      }else if(value == '1711'){
        temp = '续期规则及流程'
      }else if(value == '1712'){
        temp = '核保规则及流程'
      }else if(value == '1713'){
        temp = '客服作业规则及流程'
      }else if(value == '1714'){
        temp = '公司其他'
      }
      return temp
    },
    tousuClassPipe:function (value) {
      var temp ="";
      if(value == '16'){
        temp = '内勤'
      } else if(value == '15'){
        temp = '营销员'
      }else if(value == '17'){
        temp = '公司'
      }
      return temp
    },
    shenSuImpPipe:function (value) {
      var temp ="";
      if(value == '3001'){
        temp = '案情复杂'
      } else if(value == '3002'){
        temp = '情节严重'
      }else if(value == '3003'){
        temp = '涉及诉讼'
      }else if(value == '3004'){
        temp = '2万元以上'
      }else if(value == '3005'){
        temp = '群体投诉'
      }else if(value == '3006'){
        temp = '省级媒体'
      }
      return temp
    },
  }
}
</script>
<style lang="less" scoped>

</style>